<script setup>
   import{ref,reactive} from 'vue';
   const activeClass = reactive({
    backgroundColor: 'lightblue'
   });
   const borderClass = reactive({
    border: '1px solid black'
   });
   const isActive = ref(false);
</script>

<template>
<div :style="[activeClass,borderClass]"></div>
<div :style="[isActive ? activeClass : '',borderClass]"></div>
<div :style="[{backgroundColor: 'lightblue'},borderClass]"></div>
<input type="checkbox" v-model="isActive">
</template>

<style scoped>
.logo {
  height: 6em;
  padding: 1.5em;
  will-change: filter;
  transition: filter 300ms;
}
.logo:hover {
  filter: drop-shadow(0 0 2em #646cffaa);
}
.logo.vue:hover {
  filter: drop-shadow(0 0 2em #42b883aa);
}
div{
  width: 100px;
  height: 40px;
  margin: 5px;
}

/*
.active{
  background-color: lightblue;
}
.border{
  border: 1px solid black;
}
*/

</style>
